<template>
	<view class="place_order">
		<!-- <view class="menu-box">
			<view class="menu-item" :class="selectIndex == index ? 'native' : 'normal'" v-for="(item,index) in menus"
				:key="index" @click="selectMethods(index)">{{item}}</view>
		</view> -->
		<view class="content">
			<view class="address_account" @click="select_address">
				<block v-if="selectIndex == 0">
					<block v-if="address">
						<image class="address_icon" :src="$util.img('upload/uniapp/xxjk/order_adress@2x.png')"></image>
						<view class="address_view">
							<view class="address_text">{{address.full_address + address.address}}</view>
							<view class="info">
								<text>{{address.name ? address.name : ''}}</text>
								<text class="text_right">{{address.mobile ? address.mobile : address.telephone}}</text>
							</view>
						</view>
						<image class="img_right" :src="$util.img('upload/uniapp/xxjk/order_right@2x.png')"></image>
					</block>
					<block v-else>
						<view class="ad_dec">请添加提货地址</view>
						<image class="img_right" :src="$util.img('upload/uniapp/xxjk/order_right@2x.png')"></image>
					</block>
				</block>
				<block v-else>
					<block v-if="bankAccountInfo.withdraw_type">
						<view class="ad_dec">收款账户</view>
						<view class="account-box">
							<view class="tx-img" v-if="bankAccountInfo.withdraw_type == 'alipay'">
								<image :src="$util.img('upload/uniapp/member/apply_withdrawal/alipay.png')"
									mode="widthFix"></image>
							</view>
							<view class="tx-img" v-else-if="bankAccountInfo.withdraw_type == 'bank'">
								<image :src="$util.img('upload/uniapp/member/apply_withdrawal/bank.png')"
									mode="widthFix"></image>
							</view>
							<view class="tx-img" v-else-if="bankAccountInfo.withdraw_type == 'wechatpay'">
								<image :src="$util.img('upload/uniapp/member/apply_withdrawal/wechatpay.png')"
									mode="widthFix"></image>
							</view>
							<view class="tx-bank" v-if="bankAccountInfo.withdraw_type == 'wechatpay'">微信默认钱包</view>
							<view class="tx-bank" v-else>{{ bankAccountInfo.bank_account }}</view>
							<image class="img_right" :src="$util.img('upload/uniapp/xxjk/order_right@2x.png')"></image>
						</view>
					</block>
					<block v-else>
						<view class="ad_dec">请添加收款账户</view>
						<image class="img_right" :src="$util.img('upload/uniapp/xxjk/order_right@2x.png')"></image>
					</block>
				</block>
			</view>
			<view class="goods-body">
				<view class="g-c-box">
					<image class="goods-img" :src="$util.img(goodsDetail.sku_image)"></image>
					<view class="goods-c-view">
						<view class="goods-name">{{goodsDetail.goods_name}}</view>
						<view class="goods-num">x{{exchangeOrderCreateData.num}}</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="leave_message">
					<view class="message-t">买家留言</view>
					<input class="input_class" placeholder="留言前建议先与商家协调一致" placeholder-class="placeholder-class"
						@input="onKeyInput" />
				</view>
			</view>
			<view class="foot-box">
				<view class="foot-item" :class="selectIndex == 1 ? 'line-natice' : ''">
					<view class="foot-t">所需兑换券</view>
					<view class="foot-p">{{Number(goodsDetail.account5 * exchangeOrderCreateData.num)}}</view>
				</view>
				<view class="foot-item" v-if="selectIndex == 1">
					<view class="foot-t">预估到账</view>
					<view class="foot-c">¥{{Number(goodsDetail.expect_money * exchangeOrderCreateData.num)}}</view>
				</view>
			</view>
		</view>
		<view class="fix-box" :class="selectIndex == 0 ? 'nat' : ''" @click="upPopView">
			<view class="part-one" v-if="selectIndex == 1">
				<image class="agree-img"
					:src="$util.img(isAgree ? 'upload/uniapp/xxjk/select_agree@2x.png' : 'upload/uniapp/xxjk/normal_agree@2x.png')">
				</image>
				<view class="agreement">
					<text class="text-class">我已知晓并同意</text>
					<text class="text-class color-base-text">{{saleRule.sale_rule_name}}</text>
				</view>
			</view>
			<view class="part-two">
				<view></view>
				<view class="total-box">
					<view class="total-label">共{{exchangeOrderCreateData.num}}件</view>
					<view class="heji">合计:</view>
					<view class="price-label">{{Number(goodsDetail.account5 * exchangeOrderCreateData.num)}}兑换券</view>
					<view class="but" @click.stop="submit">提交订单</view>
				</view>
			</view>
		</view>
		<uni-popup ref="agreePop" :custom="true" :mask-click="true" type="bottom">
			<view class="p-box">
				<view class="h_box">{{saleRule.sale_rule_name}}
					<image class="img-close" :src="$util.img('upload/uniapp/xxjk/close_popup_icon@2x.png')"
						@click="close"></image>
				</view>
				<view class="pop-con">
					<scroll-view scroll-y="true" style="height: 700rpx;">
						<rich-text :nodes="saleRule.sale_rule"></rich-text>
					</scroll-view>
					<view class="ag_but" @click="agreeEvent">我已阅读并同意</view>
				</view>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import htmlParser from '@/common/js/html-parser';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				menus: ['提货', '寄售'],
				selectIndex: 0,

				leaveMessage: '',
				isAgree: false,

				address: '', //默认地址信息
				bankAccountInfo: {}, //默认银行账号信息

				exchangeOrderCreateData: {},
				goodsDetail: {},
				saleRule: {}
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getAddressDetail();
				this.getBankAccountInfo();
				this.getGoodDetail();
				this.getRuleData();
			} else {
				this.$util.redirectTo('/otherpages/login/login/login');
			}
			console.log(this.selectIndex);
		},
		onHide() {
			if (this.$refs.loadingCover) this.$refs.loadingCover.show();
		},
		onLoad(option) {
			if (option.selectIndex) {
				this.selectIndex = option.selectIndex;
			}
		},
		methods: {
			getRuleData() {
				this.$api.sendRequest({
					url: '/exchange/api/config/config',
					success: res => {
						if (res.code == 0) {
							this.saleRule = res.data;
							if (this.saleRule.sale_rule) this.saleRule.sale_rule = htmlParser(this.saleRule
								.sale_rule);
						}
					}
				})
			},
			/* 获取商品详情 */
			getGoodDetail() {
				this.exchangeOrderCreateData = uni.getStorageSync('exchangeOrderCreateData');
				this.$api.sendRequest({
					url: '/exchange/api/goods/detail',
					data: {
						sku_id: this.exchangeOrderCreateData.sku_id
					},
					success: res => {
						if (res.code >= 0) {
							this.goodsDetail = res.data.goods_sku_detail;
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						} else {
							this.$util.showToast({
								title: '未获取到创建订单所需数据！'
							});
							setTimeout(() => {
								this.$util.redirectTo('/xxjk/exchange/index/index', {}, 'reLaunch');
							}, 1500);
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			/* 获取默认地址 */
			getAddressDetail() {
				this.$api.sendRequest({
					url: '/api/memberaddress/info',
					data: {
						default: 1
					},
					success: res => {
						let data = res.data;
						if (data != null) {
							this.address = data
						}
					},
				});
			},
			/* 默认银行账号信息 */
			getBankAccountInfo() {
				this.$api.sendRequest({
					url: '/api/memberbankaccount/defaultinfo',
					success: res => {
						if (res.code >= 0 && res.data) {
							this.bankAccountInfo = res.data;
						}
					}
				});
			},
			/* 提交订单 */
			submit() {
				if (this.selectIndex == 0) {
					if (!this.address) {
						this.$util.showToast({
							title: '请选择收货地址'
						});
						return;
					}
				} else {
					if (!this.bankAccountInfo || !this.bankAccountInfo.id) {
						this.$util.showToast({
							title: '请选择银行账号'
						});
						return;
					}
				}
				if (!this.isAgree && this.selectIndex == 1) {
					this.$refs.agreePop.open();
					return;
				}
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认兑换，兑换将消耗相应的兑换券',
					success: function(res) {
						if (res.confirm) {
							that.$api.sendRequest({
								url: '/exchange/api/order/create',
								data: {
									sku_id: that.exchangeOrderCreateData.sku_id,
									num: that.exchangeOrderCreateData.num,
									type: that.selectIndex + 1,
									address_id: that.address.id,
									bank_account_id: that.bankAccountInfo.id,
									buyer_message: that.leaveMessage,
								},
								success: res => {
									if (res.code == 0) {
										uni.showToast({
											title: '兑换成功'
										});
										setTimeout(function() {
											that.$util.redirectTo(
												'/xxjk/exchange/exchange_record/exchange_record'
											);
										}, 1000);
									} else {
										that.$util.showToast({
											title: res.message
										});
									}
								}
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			select_address() { //选择地址
				if (this.selectIndex == 0) {
					var params = {
						back: '/xxjk/exchange/place_order/place_order',
						local: 0,
						type: 1
					}
					this.$util.redirectTo('/otherpages/member/address/address', params);
				} else {
					this.$util.redirectTo(
						'/otherpages/member/account/account', {
							back: '/xxjk/exchange/place_order/place_order?selectIndex=' + this.selectIndex
						},
						'redirectTo'
					);
				}
			},
			/* 买家留言 */
			onKeyInput(event) {
				this.leaveMessage = event.detail.value;
			},
			/* 弹出弹窗 */
			upPopView() {
				if (this.selectIndex == 1) {
					this.$refs.agreePop.open();
				}
			},
			/* 同意协议并关闭弹窗 */
			agreeEvent() {
				this.isAgree = true;
				this.close();
			},
			/* 关闭弹窗 */
			close() {
				this.$refs.agreePop.close();
			},
			/* 切换兑换方式 */
			selectMethods(index) {
				if (this.selectIndex != index) {
					this.selectIndex = index;
				}
			}
		}
	}
</script>

<style lang="scss">
	.place_order {
		.menu-box {
			width: 100vw;
			height: 96rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 120rpx;
			box-sizing: border-box;

			.menu-item {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				&.native {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #FC311A;
					line-height: 50rpx;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						width: 96rpx;
						height: 4rpx;
						background-color: #FC311A;
					}
				}

				&.normal {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 50rpx;
				}
			}
		}

		.content {
			padding: 20rpx 24rpx 0 24rpx;

			.address_account {
				padding: 40rpx 24rpx;
				background-color: #fff;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.address_icon {
					width: 40rpx;
					height: 40rpx;
				}

				.address_view {
					margin-left: 32rpx;

					.address_text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #222222;
						line-height: 38rpx;
					}

					.info {
						margin-top: 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #777777;

						.text_right {
							margin-left: 8rpx;
						}
					}
				}

				.ad_dec {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					line-height: 33rpx;
				}

				.account-box {
					display: flex;
					align-items: center;

					.tx-img {
						width: 40rpx;
						height: 40rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.tx-bank {
						margin: 0 16rpx 0 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
					}
				}

				.img_right {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.goods-body {
				margin-top: 20rpx;
				padding: 24rpx;
				background-color: #fff;
				border-radius: 8rpx;

				.g-c-box {
					display: flex;

					.goods-img {
						min-width: 144rpx;
						max-width: 14rpx;
						height: 144rpx;
					}

					.goods-c-view {
						margin-left: 24rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;

						.goods-name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
							line-height: 36rpx;
							margin-right: 10rpx;
						}

						.goods-num {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
							line-height: 33rpx;
						}
					}
				}

				.line {
					width: 100%;
					height: 2rpx;
					background-color: #EBEBEB;
					margin-top: 32rpx;
				}

				.leave_message {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.message-t {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
					}

					.input_class {
						text-align: right;
						width: 76%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
					}

					.placeholder-class {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 33rpx;
					}
				}
			}

			.foot-box {
				padding: 0rpx 24rpx;
				background-color: #fff;
				border-radius: 8rpx;
				margin-top: 20rpx;

				.foot-item {
					padding: 32rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&.line-natice {
						border-bottom: 2rpx solid #EBEBEB;
					}

					.foot-t {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
					}

					.foot-p {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
					}

					.foot-c {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FC311A;
						line-height: 33rpx;
					}
				}
			}
		}

		.fix-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 272rpx;
			background-color: #fff;

			&.nat {
				height: 192rpx;
			}

			.part-one {
				height: 80rpx;
				width: 100%;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #EBEBEB;

				.agree-img {
					margin-left: 32rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.agreement {
					margin-left: 12rpx;

					.text-class {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #222222;
						line-height: 30rpx;
					}
				}
			}

			.part-two {
				width: 100%;
				height: 112rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.total-box {
					display: flex;
					align-items: center;

					.total-label {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #777777;
						line-height: 30rpx;
					}

					.heji {
						margin-left: 16rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #222222;
						line-height: 30rpx;
					}

					.price-label {
						margin-left: 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FC311A;
						line-height: 38rpx;
					}

					.but {
						margin-left: 32rpx;
						margin-right: 32rpx;
						width: 176rpx;
						height: 72rpx;
						background: #FC311A;
						border-radius: 140rpx 140rpx 140rpx 140rpx;

						display: flex;
						align-items: center;
						justify-content: center;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 33rpx;
					}
				}
			}
		}

		.p-box {
			width: 100vw;
			padding-bottom: 90rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0rpx 0rpx;

			.h_box {
				width: 100vw;
				height: 114rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.img-close {
					position: absolute;
					top: 38rpx;
					right: 28rpx;
					width: 48rpx;
					height: 48rpx;
				}
			}

			.pop-con {
				padding: 0 32rpx;

				.ag_but {
					margin-top: 20rpx;
					background-color: #FC311A;
					border-radius: 168rpx;
					width: 100%;
					height: 88rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 39rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	/deep/ .uni-popup__wrapper.bottom {
		background: transparent !important;
	}
</style>